<template>
  <div class="Pie">
    <div id="main1">1</div>
    <div id="main2">2</div>
    <div id="main3">3</div>
    <div id="main4">4</div>
    <div id="main5">5</div>
    <div id="main6">6</div>
  </div>
</template>

<script>
import {nextTick, onBeforeMount, onBeforeUnmount} from "vue"
import * as echarts from 'echarts';
import axios from "axios";

export default {
  name: "Pie",
  setup() {
    let myChart1, myChart2, myChart3, myChart4, myChart5, myChart6;
    onBeforeUnmount(() => {
      myChart1.dispose();
      myChart2.dispose();
      myChart3.dispose();
      myChart4.dispose();
      myChart5.dispose();
      myChart6.dispose();
    })

    nextTick(() => {
      // echarts.init(null)
      chart1();
      chart2();
      chart3();
      chart4();
      chart5();
      chart6();
    })

    function chart1() {
      myChart1 = echarts.init(document.getElementById('main1'));
      // 绘制图表
      myChart1.setOption({
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              {value: 1048, name: 'Search Engine'},
              {value: 735, name: 'Direct'},
              {value: 580, name: 'Email'},
              {value: 484, name: 'Union Ads'},
              {value: 300, name: 'Video Ads'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }

    function chart2() {
      myChart2 = echarts.init(document.getElementById('main2'));
      // 绘制图表
      myChart2.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 1048, name: 'Search Engine'},
              {value: 735, name: 'Direct'},
              {value: 580, name: 'Email'},
              {value: 484, name: 'Union Ads'},
              {value: 300, name: 'Video Ads'}
            ]
          }
        ]
      })
    }

    function chart3() {
      myChart3 = echarts.init(document.getElementById('main3'));
      // 绘制图表
      myChart3.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 1048, name: 'Search Engine'},
              {value: 735, name: 'Direct'},
              {value: 580, name: 'Email'},
              {value: 484, name: 'Union Ads'},
              {value: 300, name: 'Video Ads'}
            ]
          }
        ]
      })
    }

    function chart4() {
      myChart4 = echarts.init(document.getElementById('main4'));
      myChart4.setOption({
        title: {
          text: 'Nightingale Chart',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          top: 'bottom',
          data: [
            'rose1',
            'rose2',
            'rose3',
            'rose4',
            'rose5',
            'rose6',
            'rose7',
            'rose8'
          ]
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        series: [
          {
            name: 'Radius Mode',
            type: 'pie',
            radius: [20, 140],
            center: ['25%', '50%'],
            roseType: 'radius',
            itemStyle: {
              borderRadius: 5
            },
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              {value: 40, name: 'rose 1'},
              {value: 33, name: 'rose 2'},
              {value: 28, name: 'rose 3'},
              {value: 22, name: 'rose 4'},
              {value: 20, name: 'rose 5'},
              {value: 15, name: 'rose 6'},
              {value: 12, name: 'rose 7'},
              {value: 10, name: 'rose 8'}
            ]
          },
          {
            name: 'Area Mode',
            type: 'pie',
            radius: [20, 140],
            center: ['75%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 5
            },
            data: [
              {value: 30, name: 'rose 1'},
              {value: 28, name: 'rose 2'},
              {value: 26, name: 'rose 3'},
              {value: 24, name: 'rose 4'},
              {value: 22, name: 'rose 5'},
              {value: 20, name: 'rose 6'},
              {value: 18, name: 'rose 7'},
              {value: 16, name: 'rose 8'}
            ]
          }
        ]
      })
    }

    function chart5() {
      myChart5 = echarts.init(document.getElementById('main5'));
      // 绘制图表
      myChart5.setOption({
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 250],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              {value: 40, name: 'rose 1'},
              {value: 38, name: 'rose 2'},
              {value: 32, name: 'rose 3'},
              {value: 30, name: 'rose 4'},
              {value: 28, name: 'rose 5'},
              {value: 26, name: 'rose 6'},
              {value: 22, name: 'rose 7'},
              {value: 18, name: 'rose 8'}
            ]
          }
        ]
      })
    }

    function chart6() {
      myChart6 = echarts.init(document.getElementById('main6'));
      myChart6.setOption({
        dataset: [
          {
            source: [
              ['Product', 'Sales', 'Price', 'Year'],
              ['Cake', 123, 32, 2011],
              ['Cereal', 231, 14, 2011],
              ['Tofu', 235, 5, 2011],
              ['Dumpling', 341, 25, 2011],
              ['Biscuit', 122, 29, 2011],
              ['Cake', 143, 30, 2012],
              ['Cereal', 201, 19, 2012],
              ['Tofu', 255, 7, 2012],
              ['Dumpling', 241, 27, 2012],
              ['Biscuit', 102, 34, 2012],
              ['Cake', 153, 28, 2013],
              ['Cereal', 181, 21, 2013],
              ['Tofu', 395, 4, 2013],
              ['Dumpling', 281, 31, 2013],
              ['Biscuit', 92, 39, 2013],
              ['Cake', 223, 29, 2014],
              ['Cereal', 211, 17, 2014],
              ['Tofu', 345, 3, 2014],
              ['Dumpling', 211, 35, 2014],
              ['Biscuit', 72, 24, 2014]
            ]
          },
          {
            transform: {
              type: 'filter',
              config: {dimension: 'Year', value: 2011}
            }
          },
          {
            transform: {
              type: 'filter',
              config: {dimension: 'Year', value: 2012}
            }
          },
          {
            transform: {
              type: 'filter',
              config: {dimension: 'Year', value: 2013}
            }
          }
        ],
        series: [
          {
            type: 'pie',
            radius: 50,
            center: ['50%', '25%'],
            datasetIndex: 1
          },
          {
            type: 'pie',
            radius: 50,
            center: ['50%', '50%'],
            datasetIndex: 2
          },
          {
            type: 'pie',
            radius: 50,
            center: ['50%', '75%'],
            datasetIndex: 3
          }
        ],
        // Optional. Only for responsive layout:
        media: [
          {
            query: {minAspectRatio: 1},
            option: {
              series: [
                {center: ['25%', '50%']},
                {center: ['50%', '50%']},
                {center: ['75%', '50%']}
              ]
            }
          },
          {
            option: {
              series: [
                {center: ['50%', '25%']},
                {center: ['50%', '50%']},
                {center: ['50%', '75%']}
              ]
            }
          }
        ]
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.Pie {
  height: 100%;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 20px;
  background: #fff;

  > div {
    border: 1px #eee solid;
    display: flex;
    color: #fff;
    justify-content: center;
    align-items: center;
  }
}
</style>